<template>
    <div class="statistics">
        <el-button >全屏</el-button>
		<div class="welcome" ref="welcome">
			<div class="top">
				<div class="article">
					<div class="article__user">
						<div class="article__user--avatar">
							<el-avatar size="large"
								src=""></el-avatar>
						</div>
						<div class="article__user--info">
							<p class="user--info__nickname">
								
							</p>
							<p class="user--info__position">web开发工程师</p>
						</div>
						<div class="article__user--setting">
							<!-- 设置按钮 -->
							<i class="iconfont icon-shezhi"
								></i>
						</div>
					</div>
					<div class="article__date">
						<div class="calendar">
							<div class="date-title">日历</div>
							<el-calendar v-model="date"
								height="100%"> </el-calendar>
						</div>
					</div>
				</div>
				<div class="aside">
					<div class="aside--message">
						<div class="aside--message__left">
							<div class="message--left__hello">早上好</div>
							<div class="message--left__weather">
								南京天气阴
								<i class="iconfont icon-duoyun"></i>
							</div>
						</div>
						<div class="aside--message__notify">通知公告</div>
					</div>
					<div class="aside--tarsk">
						<div class="tarsk--general">
							<h4>任务概况</h4>
							<div class="echartsGeneral"
								ref="echartsGeneral"></div>
						</div>
						<div class="tarsk--fact">
							<h4>本月工作进度完成情况</h4>
							<ul class="tarsk--detail__list">
								<!-- <li v-for="(item, index) in workDataDetail"
									:key="item.name + index">
									<p>{{ item.value }}</p>
									<p>{{ item.name }}</p>
								</li> -->
                                <li>
                                    <p>18</p>
                                    <p>已完成任务</p>
                                </li>
                                <li>
                                    <p>18</p>
                                    <p>已完成任务</p>
                                </li>
                                <li>
                                    <p>18</p>
                                    <p>已完成任务</p>
                                </li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- 阶段学习情况 -->
			<div class="bottom--achieve">

				<div class="bottom--achieve__left">
					<div class="achieveCharts"
						ref="achieveCharts"></div>
				</div>
				<!-- 期望课程 -->
				<div class="bottom--achieve__right">
					<div class="expectCharts"
						ref="expectCharts"></div>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import * as api from '@/api/static'
    import pieOption from '@/echarts/pie'
    import lineOption from '@/echarts/line'
    import pie2Option from '@/echarts/pie2'
    export default {
        meta:{
            title:'sjtj',
            name:'数据中心',
            icon:'iconfont icon-shuju2',
        },
        data(){
            return{
                date:new Date()
            }
        },
        mounted(){
                
                 //// echarts初始化
                let pie = echarts.init(this.$refs.echartsGeneral)
                let line = echarts.init(this.$refs.achieveCharts)
                let line2 = echarts.init(this.$refs.expectCharts)

                //// 任务概况饼图数据请求
                api.pieApi()
                .then(res=>{
                    // console.log('111',res);

                    pieOption.series[0].data = res.data.data  
                   
                    pie.setOption(pieOption)
                })

                ////线图
                api.xianApi()
                .then(res=>{

                    let linedata = res.data.data
                    ////每次进来让数据为空，防止数据重叠
                    lineOption.xAxis.data = []
                    lineOption.series[0].data = []
                    linedata.forEach(item => {
                        lineOption.xAxis.data.push(item.name)
                        lineOption.series[0].data.push(item.rate)
                    })

                    line.setOption(lineOption)
                })


                ////饼图2
                api.pie2Api()
                .then(res=>{
                    console.log('111',res);
                    let pie2Data = res.data.data
                    let newArr = []
                    pie2Data.forEach(item=>{
                        newArr.push({
                            value:item.rate,
                            name:item.title
                        })
                        // pie2Option.series[0].data
                    })
                    pie2Option.series[0].data=newArr
                    console.log('newArr',pie2Option.series[0].data);
                    line2.setOption(pie2Option)
                })
        }
    }
</script>



<style scoped>
    .container {
      height:100%;
    }
    div {
        border-radius: 10px;
    }
    .date-title {
        height: 30px;
        background: #2aac98;
        color: #fff;
        line-height: 30px;
        font-weight: bolder;
        border-radius: 10px 10px 0 0;
    }
    .calendar >>> .el-calendar-day {
        height: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }
    .calendar >>> .el-calendar-table thead th {
        padding-top: 0;
        padding-bottom: 0;
    }
    .calendar >>> .el-calendar__header {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .calendar >>> .el-calendar__body {
        padding-top: 0;
        padding-bottom: 0;
    }
    .welcome {
        background-image: linear-gradient(135deg, #4c67ff, #5635df);
        margin-top: 5px;
        color: #666;
        display: flex;
        height: 90%;
        flex-direction: column;
        justify-content: space-between;
        /* background: #131925; */
    }
    .top {
        display: flex;
        flex: 7;
        justify-content: space-around;
        margin-bottom: 5px;
        margin: 5px;
    }
    .bottom--achieve {
        display: flex;
        flex: 3;
    }
    .bottom--achieve__left {
        flex: 5;
        margin-right: 10px;
    }
    .bottom--achieve__right {
        flex: 5;
    }
    .echartsGeneral {
        width: 80%;
        height: 80%;
        display: flex;
        align-items: center;
    }
    .achieveCharts {
        /* background-color: red; */
        height: 200px;
    }
    .expectCharts {
        height: 100%;
    }
    .article {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 5px;
    }
    .aside {
        flex: 7;
        display: flex;
        flex-direction: column;
    }
    .aside--message {
        flex: 5;
        display: flex;
        justify-content: space-around;
        margin-bottom: 5px;
    }
    .aside--tarsk {
        display: flex;
        justify-content: space-between;
        flex: 5;
        align-items: center;
    }
    div {
        flex-shrink: 0.6;
    }
    .tarsk--general {
        /* width: 100%; */
        height: 100%;
        flex: 5;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }
    .tarsk--general h4 {
        text-align: left;
        padding-left: 5%;
        margin-top: 10px;
    }
    .tarsk--fact {
        display: flex;
        flex: 5;
        justify-content: space-between;
        flex-direction: column;
    }
    .tarsk--fact ul {
        margin-top: 15px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .aside--message__left {
        flex: 4;
        display: flex;
        flex-direction: column;
        margin-right: 5px;
    }
    .aside--message__notify {
        display: flex;
        flex: 6;
        display: flex;
        flex-direction: column;
    }
    .message--left__hello {
        flex: 5;
        margin-bottom: 5px;
    }
    .message--left__weather {
        flex: 5;
    }
    .article__user {
        height: 130px;
        display: flex;
        /* flex: 4; */
        margin-bottom: 5px;
        justify-content: space-around;
        align-items: center;
    }
    .article__user--avatar {
        flex: 3;
    }
    .article__user--info {
        flex: 3;
    }
    .article__user--setting {
        flex: 1;
        height: 100%;
        position: relative;
    }
    .article__user--setting i {
        position: absolute;
        top: 5px;
        right: 10px;
    }
    .article__user--avatar >>> .el-avatar--large {
        width: 80px;
        height: 80px;
    }
    .article__date {
        height: 100%;
        flex: 6;
    }
    
    .article__user,
    .article__date,
    .message--left__hello,
    .message--left__weather,
    .aside--tarsk,
    .aside--message__notify,
    .bottom--achieve {
        /* background: #202835; */
        background: #fff;
        /* border: 1px solid #ccc; */
    }
    </style>